<script setup lang="ts">
/**
 * 页签对象
 */
export interface TabView {
  /** 页签标题 */
  title: string;
  /** 页签路由完整路径 */
  id: string;
  [key: string]: any;
}

interface Props {
  visitedViews: TabView[];
  currentView?: TabView;
}

const props = defineProps<Props>();
const emit = defineEmits<{
  (e: 'select', tab: TabView): void;
  (e: 'close', tab: TabView): void;
}>();

const isActive = (tab: TabView) => props.currentView?.id === tab.id;
const closeSelectedTab = (tab: TabView) => {
  emit('close', tab);
};
const handleClick = (tab: TabView) => {
  emit('select', tab);
};
</script>

<script lang="ts">
export default {
  name: 'SimpleTabs',
};
</script>

<template>
  <section
    class="flex w-full flex-1 select-none flex-wrap gap-2 bg-zinc-100 px-4 py-1"
    v-show="visitedViews.length"
  >
    <div
      class="flex max-w-[160px] cursor-pointer items-center justify-center gap-2 rounded-md border border-solid border-slate-400 bg-white px-2 py-1"
      :class="{ active: isActive(tab) }"
      v-for="tab in visitedViews"
      :key="tab.id"
      @click="handleClick(tab)"
    >
      <span class="truncate text-sm">{{ tab.title }}</span>
      <div
        class="flex-shrink-0 rounded-full p-1 hover:bg-slate-200"
        @click.prevent.stop="closeSelectedTab(tab)"
      >
        <svg-icon class="" name="close" :size="{ width: 12, height: 12 }" />
      </div>
    </div>
  </section>
</template>

<style scoped>
.active {
  color: #3b82f6;
  border-color: #3b82f6;
  border-width: 2px;
}

/* PC电脑端 */
@media screen and (max-width: 1024px) {
}
</style>
